<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
	<title></title>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/serverUrl.js"></script>
	<link rel="stylesheet" href="css/news.css" />
</head>
<style>
		.question{
			margin: 15px;
			font-family: KaiTi;
			line-height:30px;
			font-size: 20px;
		}
		.answer{
			margin-left: 15px;
			margin-right: 15px;
			font-family: KaiTi;
			margin-top: 15px;
			line-height:30px;
			font-size: 20px;
		}
		.trueAnswer{
			margin: 15px;
			font-family: simhei;
			line-height:30px;
			font-size: 20px;

		}
		.answer-bg{
			border: 1px #9e9e9e solid;
			padding: 5px 5px 5px 15px;
			border-radius: 4px;
			background: #fafafa;
			color: #616161;

		}

		.answer-true{
			border: 1px #4caf50 solid;
			padding: 5px 5px 5px 15px;
			border-radius: 4px;
			background: #e8f5e9;
			color: #388E3C;
		}


		.answer-false{
			border: 1px #e51c23 solid;
			padding: 5px 5px 5px 15px;
			border-radius: 4px;
			background: #fed0dc;
			color: #c41411;
		}

		.questionTitle{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			background: lightgray;
			padding-top: 5px;
			padding-bottom: 5px;
		}

		.title{
			margin-left: 10px;
			margin-right: 10px;
		}
	</style>
<script type="text/javascript">
		var index = 0;
		var paperData = {}
		var question = {}

		function loadPaper(paperDataString){
			paperData = paperDataString
		}

        function pre() {
            if(index == 0){
                let params = {
                    errorMessage: '已经是第一题了'
                }
                 WebViewJavascriptBridge.callHandler('indexError',params,function(response) {
                                       
                   });
                 return
            }
            index--
            loadQuestion(index)
        }

        function next() {
            if(index == paperData.length-1){
                let params = {
                    errorMessage: '已经是最后一题了'
                }
                 WebViewJavascriptBridge.callHandler('indexError',params,function(response) {
                                       
                   });
                 return
            }
            index++
            loadQuestion(index)
        }


		function loadQuestion(questionIndex){
			index = questionIndex
			question = paperData[questionIndex]

			switch(question.questionType) {
				case 1:
					tx = '判断题'
					break
				case 2:
					tx = '单选题'
					break
				case 3:
					tx = '多选题'
					break
				case 4:
					tx = '计算题'
					break
				case 5:
					tx = '填空题'
					break
				case 6:
					tx = '问答题'
					break
				case 7:
					tx = '技能题'
					break
				case 8:
					tx = '简答题'
					break
				case 9:
					tx = '名词解释'
					break
				case 10:
					tx = '绘图题'
					break
				case 11:
					tx = '论述题'
					break
				case 12:
					tx = '案例分析'
					break
				case 13:
					tx = '综合题'
					break
				case 14:
					tx = '识图题'
					break
				case 15:
					tx = '选答题'
					break
				case 16:
					tx = '改错题'
					break
				case 17:
					tx = '操作题'
					break
				default:
					tx = ''
					break
			}
			$('#titleName').html(tx)

			$("#total").html(paperData.length)
			$("#index").html(questionIndex+1)
			$("#question").html(question.questionContent)
			var answerList = question.answerList
			var size = answerList.length
			$("#trueAnswer").html("正确答案："+question.solution)
			$("#userAnswer").html("您的答案："+question.userAnswer)
			var answerHtml = ""
			for(var i = 0;i<size;i++){
				var answer = answerList[i]
				var bgClass = "answer-bg"
				if(question.solution.indexOf(answer.optionName)>=0
					&&question.userAnswer.indexOf(answer.optionName)>=0){
						bgClass = "answer-true"
				}
				if(question.solution.indexOf(answer.optionName)>=0
					&&question.userAnswer.indexOf(answer.optionName)<0){
						bgClass = "answer-true"
				}
				if(question.solution.indexOf(answer.optionName)<0
					&&question.userAnswer.indexOf(answer.optionName)>=0){
						bgClass = "answer-false"
				}
				answerHtml+="<div id='answer_"+i+"' class='answer "+bgClass+"'>"+answer.optionName+"、"+answer.answerContent+"</div>"
				$("#selection").html(answerHtml)
			}
		}

	</script>
<body>
<div class="questionTitle">
	<div class="title" id="titleName"></div>
	<div class="title">第 <span id="index"></span> 题/共 <span id="total"></span> 题</div>
</div>
<div class="question" id="question">
</div>
<div class="selection" id="selection">
</div>
<div class="trueAnswer" id="trueAnswer">
</div>
<div class="trueAnswer" id="userAnswer">
</div>
</body>
</html>
